<template>
  <div id="noticeDetails" class="app-container common-main-container scrollbar-no-width content-container">
    <div style="position: relative;">
      <div ref="print" class="notice-body">
        <div class="title">{{ noticeDetails.noticeTitle }}</div>
        <div class="subDesc">
          <span class="color-primary tag">{{ noticeDetails.noticeType===1 ? '通知公告' : '系统消息' }}</span>
          <span class="tag">{{ noticeDetails.createdBy | optionUserFormat }}</span>
          <span class="tag"> {{ noticeDetails.gmtCreated | formatDate(T.DATE_TIME_FMT) }}</span>
        </div>
        <div class="content" v-html="noticeDetails.noticeContent" />
      </div>
      <div class="print">
        <i class="el-icon-printer color-primary common-cursor" @click="printing" />
      </div>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import Print from '@/utils/print.js'
Vue.use(Print)
export default {
  data() {
    return {
      noticeDetails: {}
    }
  },
  computed: {
  },
  created() {
    console.log(this.$route.params.id)
    this.loadNoticeDetails()
  },
  methods: {
    loadNoticeDetails() {
      this.$store.dispatch('getNoticeById', this.$route.params.id).then(res => {
        this.noticeDetails = res
      }).catch((_) => {})
    },
    printing() {
      this.$print(this.$refs.print)
    }
  }
}
</script>
<style scoped lang="scss">
@page {
  size: auto A4 landscape;
  margin: 3mm;
}
.notice-body{
  padding: 0 25px;
  .title{
    margin-top: 20px;
  }
}
#noticeDetails{
  width: 1000px;
  max-width: 1000px;
  margin: 0 auto;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  .print{
    text-align: right;
    position: absolute;
    top: 50px;
    left: 0px;
    right: 12px;
    i{
      font-size: 2.5em;
    }
  }
}

</style>
